<template>
  <div>
    <h3>系统管理</h3>
    <hr style="margin: 20px auto" />
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="姓名" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="ruleForm.age" />
      </el-form-item>
      <el-form-item label="选择专业" prop="major">
        <el-select v-model="ruleForm.major" placeholder="请选择专业方向">
          <el-option label="前端开发" value="qianduan" />
          <el-option label="视觉设计" value="shijue" />
          <el-option label="全栈开发" value="quanzhan" />
          <el-option label="人工智能" value="rengong" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否毕业" prop="graduation">
        <el-switch v-model="ruleForm.graduation" />
      </el-form-item>
      <el-form-item label="个人介绍" prop="intro">
        <el-input
          v-model="ruleForm.intro"
          type="textarea"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">添加学生</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  name: "",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const data = reactive({
      ruleForm: {
        username: "",
        sex: "男",
        age: "",
        major: "",
        graduation: false,
        intro: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
          {
            min: 2,
            max: 4,
            message: "长度在2到4之间",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur",
          },
        ],
        major: [
          {
            message: "至少选择一项",
            trigger: "change",
          },
        ],
        intro: [
          {
            required: true,
            message: "介绍不能为空",
            trigger: "blur",
          },
          {
            min: 3,
            max: 18,
            message: "长度在3到18之间",
            trigger: "blur",
          },
        ],
      },
    });

    // 添加
    const submitForm = () => {
      if (
        data.ruleForm.username != "" &&
        data.ruleForm.age != "" &&
        data.ruleForm.major != "" &&
        data.ruleForm.intro != ""
      ) {
       
        store.dispatch("addStudent", data.ruleForm).then((res) => {
          ElMessage.success(res.msg);
          console.log(data.ruleForm);
          data.ruleForm = {
            username: "",
            sex: "男",
            age: "",
            major: "",
            graduation: false,
            intro: "",
          };
        });
      } else {
        ElMessage.error("都不能为空！");
      }
    };

    return {
      ...toRefs(data),
      submitForm,
    };
  },
};
</script>

<style scoped lang='scss'>
.el-input {
  width: 300px;
}
</style>